@extends('layouts.console_header')

@section('title', '注册用户明细')

@section('resources')
    @parent
    <link rel="stylesheet" href="{{env('CSS_DOMAIN')}}css/jquery.dataTables.min.css?v={{env('CSS_VERSION')}}">
    <style>
    	.shop_get_shopul{width: 800px;overflow: hidden;margin: 20px 30px;}
    	.shop_get_shopul li{width: 400px;float: left;margin: 10px 0;}
		.order_details_list table{border-collapse:collapse;}
		.order_details_list table thead tr{border: 1px solid #ccc;}
		.order_details_list table td{text-align: center;padding: 5px 0;}
		#order_last_page{background-color: #9955c6;float: left;display: none;}
		#order_next_page{background-color: #9955c6;float: right;display: none;}
		table tbody{border-top: 1px solid #000;border-bottom: 1px solid #000;font-size: 14px;}
		table tbody tr:nth-child(2n+1){border-bottom: 1px solid #ddd;background-color: #f9f9f9;}
		table tbody tr:nth-child(2n){border-bottom: 1px solid #ddd;}
		table tbody tr td{padding: 10px 0;}
		table tbody tr td:nth-child(1){background-color: #f1f1f1;}
		.order_details{position: fixed;top: 230px;left: 50%;width: 600px;margin-left: -300px;border: 1px solid #808080;background-color: #fff;padding: 0 10px 20px;display: none;z-index: 1001;}
		.order_details .title img{width: 30px;position: absolute;top: 10px;right: 10px;}
		.order_details .title{width: 550px;text-align: center;font-size: 30px;color: #808080;line-height: 50px;}
    </style>
@endsection

@section('content')
<section class="user_list">
	<div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
		<p class="fz_14 account_title fl" style="border: none;">
		    <span style="color: #7f7f7f;"><a href="/console/index">首页</a>>地推管理><a href="/console/salesman/shop/lists">地推商家列表</a>>
		        <a href="/console/salesman/shop/get?cityid={{$cityid}}&shopid={{$shopid}}">地推详情</a>>
            </span>
            <span class="co_violet">注册用户明细</span>
        </p>
		<a onclick="history.go(-1);" href="#"><p class="fr tc back_btn">返回</p></a>
		<a href="#" onclick="export_data()"><p class="fr tc back_btn">导出</p></a>
	</div>
	<div style="background-color: #fff;">
		<ul class="shop_get_shopul">
            <li class="fz_13 co_gray56"><span>门店名称 ：</span><span>{{$info['name']}}</span></li>
            <li class="fz_13 co_gray56"><span>门店地址 ：</span><span>{{$info['address']}}</span></li>
            <li class="fz_13 co_gray56"><span>地推时间：</span><span>{{$info['contractmonth']}}个月</span></li>
            <li class="fz_13 co_gray56"><span>地推创建日：</span><span>{{$info['contractstarttime']}}</span></li>
            <li class="fz_13 co_gray56"><span>缴纳金额：</span><span>{{$info['payfee']}}元</span></li>
            <li class="fz_13 co_gray56"><span>地推到期日：</span><span>{{$info['contractlasttime']}}</span></li>
        </ul>
	    <table id="example" class="display" cellspacing="0" width="100%">
	        <thead>
	            <tr>
	                <th>序号</th>
	                <th>注册时间</th>
	                <th>注册用户</th>
	                <th>地推来源</th>
	                <th>订单数</th>
                	<th>地推订单数</th>
                	<th>地推订单实付</th>
                	<th>是否有效</th>
                	<th>地推订单</th>
	            </tr>
	        </thead>
	        <tfoot>
	            <tr>
	                <th>序号</th>
	                <th>注册时间</th>
	                <th>注册用户</th>
	                <th>地推来源</th>
	                <th>订单数</th>
                	<th>地推订单数</th><!-- TODO -->
                	<th>地推订单实付</th>
                	<th>是否有效</th>
                	<th>地推订单</th>
	            </tr>
	        </tfoot>
	        <tbody>
	        @foreach($lists as $list)
	            <tr>
	            @if(!isset($i))
	            	<td>{{$i=1}}</td>
                @else
                    <td>{{++$i}}</td>
                @endif
	                <td>{{date('Y-m-d H:i:s', strtotime($list['created_at']))}}</td>
	                <td>{{$list['mobile']}}</td>
                @if($list['shopusermobile'] != '')
	                <td>{{$list['registersource']}} ({{$list['shopusermobile']}})</td>
                @else
                    <td>{{$list['registersource']}}</td>
                @endif
	                <td>{{$list['ordernum']}}</td>
	                <td>{{$list['validordernum']}}</td>
	                <td>{{$list['orderamount']}}</td>
                @if($list['getmoney'] != 0)
                    <td>有效</td>
                @else
                    <td><span style="color:red">无效</span></td>
                @endif
					<td><a style="color: #9955c6;" href="#" onclick="getOrderMessage({{$list['userid']}},orderpage)">查看</a></td>
	            </tr>
            @endforeach
	        </tbody>
	    </table>
	</div>
	<div class="order_details">
		<p class="title">
			<span>地推订单</span>
			<img src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">
		</p>
		<p id="order_name" style="text-align: center;color: #808080;margin: 10px 0;"></p>
		<div class="order_details_list">
			<table class="consume" cellspacing='0' cellpadding='0' width="100%">
				<thead>
				<tr>
					<td>订单时间</td>
					<td>订单号</td>
					<td>地推订单实付</td>
				</tr>
				</thead>
				<tbody id="tbody_orderdetail">

				</tbody>
			</table>
		</div>
		<p style="margin-top: 20px;">
			<button id="order_last_page">上一页</button>
			<button id="order_next_page">下一页</button>
		</p>
	</div>
</section>
@endsection

@section('scriptResources')
    @parent
    <script src="{{env('JS_DOMAIN')}}js/jquery.dataTables.min.js?v={{env('JS_VERSION')}}"></script>
    <script>
        var cityid='{{$cityid}}';
        var shopid='{{$shopid}}';
        var date='{{$date}}';
        var orderpage = 1;
        var length = 10;
        var orderuserid;
    	function export_data() {
            window.open("/console/salesman/shop/register/export?cityid="+cityid+"&shopid="+shopid+'&date='+date, '_blank');
    	}
        //获取地推订单信息
			function getOrderMessage(userid,orderpage){
				$('.order_details').show();
				$(".public_prompt_mark").show();
				$(".public_prompt_mark").height($(window).height());
				orderuserid = userid;
				$.ajax({
					url: '/console/salesman/person/order/lists',
					type: 'get',
					data: {
						userid:userid,
						page:orderpage,
						length:length,
						cityid:cityid,
						type: "shopsalesman"
					},
					dataType: 'json',
					success:function(data) {
						if (data.status == 'success') {
							var data = data.data;
							var lists = data.lists;
							if(data.mobile == ""){
								$("#order_name").html(data.name + data.count + '笔地推订单')
							}else {
								$("#order_name").html(data.name + ' (' + data.mobile + ') ' + data.count + '笔地推订单')
							}
							$("#tbody_orderdetail").empty();
							if((lists.length + (length * (orderpage-1))) < data.count){
								$("#order_next_page").show();
							}else{
								$("#order_next_page").hide();
							};
							if(orderpage <=1){
								$("#order_last_page").hide();
							}else{
								$("#order_last_page").show();
							};
							if(lists == ''){
								$("#tbody_orderdetail").html("<tr><td colspan='3' style='font-size: 18px;color: #333;'>~无地推订单~</td></tr>");return;
							}else{
								for (var i = 0; i < lists.length; i++) {
									var tr = $('<tr>'+
										'<td>'+lists[i].created_at+'</td>'+
										'<td>'+lists[i].ordernumber+'</td>'+
										'<td>'+lists[i].orderamount+'</td>'+
										'</tr>');
									$("#tbody_orderdetail").append(tr);
								};
							}
						} else {
							alert(data.message)
						}
					}
				})
			}
			//地推订单下一页
			$("#order_next_page").click(function(){
				orderpage++;
				getOrderMessage(orderuserid,orderpage)
			})
			//地推订单上一页
			$("#order_last_page").click(function(){
				orderpage--;
				getOrderMessage(orderuserid,orderpage)
			});
			$(".order_details .title img").on("click",function () {
				orderpage = 1;
				$("#tbody_orderdetail").empty();
				$("#order_next_page").hide();
				$("#order_last_page").hide();
				$(".public_prompt_mark").hide();
				$('.order_details').hide();
			})
    </script>
@endsection